<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/include/taglib.jsp"%>
<%@ page import="java.sql.*"%>
				<%
						String driverName = "com.mysql.jdbc.Driver"; //Mysql数据库连接
						String userName = "root";
						String psw = "123456"; //本行和上一行是数据库的登录名和密码
						String dbName = "test1"; //数据库名字
						String url = "jdbc:mysql://localhost:3306/test1?serverTimezone=UTC";
						Class.forName("com.mysql.jdbc.Driver");
						Connection conn = DriverManager.getConnection(url, userName, psw);
						Statement stam = conn.createStatement(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${ctx}/layui/css/layui.css">
<script>
	var ctx = "${ctx}";
</script>

<style>
/*外层div*/
.input-file-box {
	border: 1px solid gray;
	width: 150px;
	height: 150px;
	position: relative;
	text-align: center;
	border-radius: 8px;
}
/*文字描述*/
.input-file-box>span {
	display: block;
	width: 100px;
	height: 30px;
	position: absolute;
	top: 0px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: gray;
}
/*input框*/
.input-file-box #uploadfile {
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
</style>
</head>
<body>
	<form class="layui-form" style="width: 80%;" id="auf">
		<div class="layui-form-item">
			<label class="layui-form-label">商品id</label>
			<div class="layui-input-inline">
				<!-- <input type="text" name="product_id" id="product_id"
					class="layui-input" lay-verify="required"
					placeholder="请输入需要添加图片的商品id" value=""> -->
					<select name="product_id" id="product_id"
						class="layui-input search_input"
						lay-search="">
						<option value="">--请选择要关联的商品--</option>
		
						<%
							
							ResultSet rs = stam.executeQuery("SELECT product.product_name,product.product_id FROM product");

							while (rs.next()) //循环输出数据
							{
								out.print("<option value=" + rs.getInt("product_id") + ">" + rs.getString("product_name")
										+ "</option>");
							}
							
						%>
					</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">商品图片</label>
			<div class="layui-input-inline">
			<button type="button" class="layui-btn" id="product_img">
					<i class="layui-icon">&#xe67c;</i>上传图片
				</button>
				<img id="imgFace" style="width: 120px" src="" /> <input type="text"
					name="product_img" id="product_img" required lay-verify="required"
					class="layui-input">
				<!-- <input type="text" name="product_img" id="product_img"
					class="layui-input" lay-verify="required" placeholder="请输入要添加的图片地址"
					value=""> -->
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">商品详细图</label>
			<div class="layui-input-inline">
				<input type="text" name="product_introductionimg"
					id="product_introductionimg" class="layui-input"
					lay-verify="required" placeholder="请输入要添加的图片地址" value="">
			</div>
		</div>
		<!-- <div class="layui-form-item">
			<div class="input-file-box">
				<span>点击上传图片</span> <input type="file" name="" id="uploadfile"
					multiple>
			</div>
			<div id="img-box"></div>
		</div> -->
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="addProductImg">立即提交</button>
			</div>
		</div>
	</form>



	<script type="text/javascript" src="${ctx }/layui/layui.js"></script>
	<script type="text/javascript"
		src="${ctx }/js/productImg/addProductImg.js"></script>

	<script type="text/javascript">
		function btnUploadFile(e) {

			var imgFile = e.target.files[0]; //获取图片文件
			var formData = new FormData(); // 创建form对象
			formData.append('file', imgFile); // 通过append向form对象添加数据

			$.ajax({
				url : ctx + "/productImg/avatar", //请求的接口地址
				type : 'POST',
				cache : false, //上传文件不需要缓存
				data : formData,
				processData : false, // 不要去处理发送的数据
				contentType : false, // 不要去设置Content-Type请求头
				success : function(data) {

				},
				error : function(err) {
					console.log(err)
				}
			})

		}

		window.onload = function() {
			var input = document.getElementById("uploadfile");
			var div;
			// 当用户上传时触发事件
			input.onchange = function() {
				readFile(this);
			}
			//处理图片并添加都dom中的函数
			var readFile = function(obj) {
				// 获取input里面的文件组
				var fileList = obj.files;
				//对文件组进行遍历，可以到控制台打印出fileList去看看
				for (var i = 0; i < fileList.length; i++) {
					var reader = new FileReader();
					reader.readAsDataURL(fileList[i]);
					// 当文件读取成功时执行的函数
					reader.onload = function(e) {
						div = document.createElement('div');
						div.innerHTML = '<img src="'+this.result+'" style=" width: 50%; height: 50%;"/>';
						document.getElementById("img-box").appendChild(div);
					}
				}
			}
		}
	</script>
</body>
</html>